<%@page import="ta.utils.PageInfo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="ta.pojo.Blog"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<!--忽略页面中的数字识别为电话，忽略email识别-->
		<meta name="format-detection" content="telphone=no, email=no" />
		<title>主页</title>
		<link rel="stylesheet" type="text/css" href="blogindex/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="blogindex/css/base.css" />
		<link rel="stylesheet" type="text/css" href="blogindex/css/index.css" />
		<script type="text/javascript" src="blogindex/js/html5shiv.min.js"></script>
		<script type="text/javascript" src="blogindex/js/respond.min.js"></script>
		<link rel="stylesheet" type="text/css" href="blogindex/css/media.css" />
		<style type="text/css">
			.page-banner img{max-width:100%;}
			.glyphicon-heart{margin-left:20px;}
			.news-text{ margin:30px 0px;  border-bottom: 1px  dotted #dedede; padding-bottom: 10px;}
			.news-list a.read-all{ margin-right: 30px;}
		</style>
	</head>

	<body>
	<!--导航-->
	<jsp:include page="top.jsp"></jsp:include>
		<!--轮播图-->
		<div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
			<!-- 圆点 -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- 图片区域 -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="blogindex/img/lunbo1.png" alt="">
				</div>
				<div class="item">
					<img src="blogindex/img/lunbo2.png" alt="">
				</div>
				<div class="item">
					<img src="blogindex/img/lunbo1.png" alt="">
				</div>
			</div>

			<!-- 左右控制箭头 -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left " aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	<!--文章列表 -->
	<jsp:include page="blogindex/bloglist.jsp"></jsp:include>
	<!-- 添加博客模态框（Modal） -->
	<div class="modal fade" id="addBlogForm" tabindex="-1" role="dialog"
		 aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 800px; height: 600px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">博客发布</h4>
				</div>
				<div class="modal-body">
					<form id="f" action="Index?type=add1" method="post">
						<fieldset>
							<label class="block clearfix">
									<span class="block input-icon input-icon-right">
										<input type="text" class="form-control" name="title"
											   id="title"	placeholder="请输入博客标题" />
									</span>
							</label>
							<label class="block clearfix">
									<span class="block input-icon input-icon-right">
									<textarea name="content" id="content"></textarea>
									</span>
							</label>
							<label class="block clearfix"> <span
									class="block input-icon input-icon-right">
									<select id="category" name="category"  class="chosen-select form-control"  >
									   <c:forEach var="cat" items="${list }">
										   <option>${cat.cname}</option>
									   </c:forEach>
									</select>
								</span>
							</label>
						</fieldset>
					</form>
				</div>
				<div class="modal-footer">
					<button id="btnAddBlog" type="button" class="btn btn-success">确定</button>
					<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>


		<div class="footer">
			<a href="#"> <i class="glyphicon glyphicon-user"></i></a>
			<a> &nbsp; </a>
			‘s blog  ❤<a href="tel:0123456789"></a> <br/>

			© 2022 <a href="http://www.qywzmb.com/" target="_blank"></a>
		</div>

	<script type="text/javascript" src="blogindex/js/jquery.js"></script>
	<script type="text/javascript" src="blogindex/js/bootstrap.js"></script>
	<script type="text/javascript" src="blogindex/js/nav.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/nav.js"></script>
	<!--返回顶部-->
	<a href="javascript:scrollTo(0,0)">返回顶部</a>
	<%--模态框加--%>
	<script src="assets/laydate/laydate.js"></script>
	<script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
	<script type="text/javascript">
		$(function(){
			CKEDITOR.replace('content',{
				filebrowserUploadUrl : 'ckupload?Type=File',
				filebrowserImageUploadUrl : 'ckupload?Type=Image',
				filebrowserFlashUploadUrl : 'ckupload?Type=Flash',
				width:754,
				height:400
			});
			//图片异步上传回显change事件
			$("#imgs").change(function(){
				var formData = new FormData();
				formData.append('file', $('#imgs')[0].files[0]);  //添加图片信息的参数
				$.ajax({
					type:'post',
					dataType:'json',
					data:formData,
					cache: false, //上传文件不需要缓存
					url:'ckupload',
					processData: false, // 告诉jQuery不要去处理发送的数据
					contentType: false, // 告诉jQuery不要去设置Content-Type请求头
					success:function(data){
						if(data.uploaded==1){
							$("#pic").attr("src",data.url);
							$("#pic").attr("width","150px");
							$("#pic").attr("height","150px");
							$("#picpath").val(data.url);
							//alert(data.url);
						}else{
							alert("图片上传失败！");
						}
					}
				})

			});
			//添加
			$("#btnAddBlog").click(function(){
				var form=$("#f");
				var title=$("#title").val();
				var content=$("#content").val();
				var category=$("#category").val();
				if(title.length<1)
				{
					alert("博客标题不能为空！");
					$("#title").focus();
					return;
				}
				form.submit();
			});
		});
	</script>
	</body>
</html>